<template>
  <flexbox class="base-tabs-head" justify="space-between">
    <div>
      <slot name="left"/>
    </div>
    <el-tabs v-model="currentValue" @tab-click="handleTabsClick">
      <template v-for="(item, index) in tabs" :key="index + item.name">
        <el-tab-pane :label="item.label" :name="item.name"/>
      </template>
    </el-tabs>
    <div>
      <slot name="right"/>
    </div>
  </flexbox>
</template>


<script setup>
defineOptions({
  // 中间为tab效果的布局
  name: 'BaseTabsHead',
})


const props = defineProps({
  selectValue: [String, Number],
  tabs: Array
})

const currentValue = ref('')

watch(() => props.selectValue, () => {
  currentValue.value = props.selectValue
})

onMounted(() => {
  currentValue.value = props.selectValue
})

const emits = defineEmits(['update:selectValue', 'change'])

function handleTabsClick(tab, event) {
  emits('update:selectValue', tab.name)
  emits('change', tab.name)
}

</script>

<style lang="scss" scoped>
.base-tabs-head {
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  height: 50px;
}

.el-tabs {
  display: inline-block;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__item) {
    height: 46px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none !important;
  }
}
</style>
